<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试页面</title>
</head>
<body>
    <h1>用户登录-Web前端页面</h1>
    <form action="#" method="post" class="login-form">
        <input type="text" placeholder="请输入用户名" class="username"> <br>
        <input type="text" placeholder="请输入密码" class="pass"> <br>
        <input type="text" placeholder="验证码"> <button>发送验证码</button>
        <button onclick="handleLogin()">登录</button>
    </form>

    <button class="callAppSideMethod">调用应用侧的方法</button>
    <button class="transDataToApp">向应用侧传递数据</button>

    <script>
        document.querySelector('.login-form').onsubmit = (event) => {
            // 阻止表单的默认行为-默认在点击提交按钮后会提交表单数据到 action 指定的资源中进行处理
            event.preventDefault()
        }

        function handleLogin() {
            console.log('用户登录中...')
            // 登录成功后，清空密码框
            document.querySelector('.pass').value = ''
        }

        function add(num1, num2) {
            return num1 + num2
        }

        function fillUsernameAndPassword(username, password) {
            document.querySelector('.username').value = username
            document.querySelector('.pass').value = password
        }

        document.querySelector('.callAppSideMethod').onclick = function() {
            console.log('网页中的打印：：：')
            appSide.test()
        }

        document.querySelector('.transDataToApp').onclick = function() {
            console.log('从web页面向应用传递数据')
            const data = document.querySelector('.username').value
            appSide.fetchData(data)
        }
    </script>
</body>
</html>
